<template>
  <van-tabs
    style="background-color: #f2f2f2; min-height: 100vh"
    @change="changeActive"
    v-model="active"
  >
    <van-tab v-for="(item, index) in tabs" :key="index" :name="item.status" :title="item.name">
      <PullRefresh v-model="loading" @refresh="onRefresh">
        <van-list
          :loading="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <div
            class="product-list-block-wrap"
            :class="{ 'product-list-grad-wrap': type === 'grid' }"
          >
            <template v-for="(item, index) in list" :key="index">
              <Item :item="item"/>
            </template>
          </div>
        </van-list>
      </PullRefresh>
    </van-tab>
  </van-tabs>
</template>
<script setup>
import { Tab, Tabs,PullRefresh } from "vant";
import { ref, onMounted, watch } from "vue";
import Item from "./item.vue";
import request from "@/utils/request";
const tabs = ref([]);
const list = ref([]);
const loading = ref(true);
const finished = ref(false);
const active = ref('');
const pageParams = {
  page: 1,
  pageSize: 15,
};
const onLoad = () => {
  getList(false);
};
const onRefresh = () => {
  getList(true);
};
const getList = (refresh) => {
  if (refresh) {
    pageParams.page = 1;
  } else {
    pageParams.page++;
  }
  loading.value = true;
  finished.value = false;
  request({
    url: "App/api/personOrderList",
    method: "POST",
    data: {
      status: active.value,
      ...pageParams,
    },
  }).then((res) => {
    loading.value = false;
    if (refresh) {
      list.value = res.data.data;
    } else {
      list.value = list.value.concat(res.data.data);
    }
    if (res.data.data.length == 0) {
      finished.value = true;
    }
  });
};
onMounted(() => {
  request({
    url: "App/api/getOrderStatus",
    method: "POST",
  }).then((res) => {
    tabs.value = res.data.map((item)=>({...item,status:item.status+''}));
    active.value = res.data[0].status;
  });
});
const changeActive = (v) => {
    active.value = v;
    getList(true);
};
</script>

<style lang="scss" scoped>
    .product-list-block-wrap{
        padding-top: 10px;
    }
</style>